<template>
  <div class="container">
    <common-header :title="song"></common-header>
    <div class="content">
      <audio ref="audio" preload="auto" id="music" @timeupdate="Init()" @ended="PlayEnd()" @canplay="Init()"
             @waiting="loading"
             webkit-playsinline="true">
        <source src="./求佛.mp3">
        您的浏览器不支持 audio 元素。
      </audio>
      <div class="logo"></div>
      <h2 class="music_title">{{song}}</h2>
      <div ref="musicController" class="music_controller clearfix">
        <div ref="switch" class="music_switch fl" @click="Switch()"></div>
        <div ref="currentTime" class="current_time fl">{{currentTime}}</div>
        <div class="progress_bar fl">
          <div class="total_bar"></div>
          <div class="current_bar">
            <div class="toolbar"></div>
          </div>
          <div ref="jumpBar" class="jump_bar"></div>
        </div>
        <div class="total_time fr">{{totalTime}}</div>
      </div>
    </div>
  </div>
</template>
<script>
  // 引入图片路径
  import playUrl from '../../assets/images/preview/music_play.png'
  import pauseUrl from '../../assets/images/preview/music_pause.png'

  import musicLoadingUrl from '../../assets/images/preview/music_loading.gif'
  import musicplayingUrl from '../../assets/images/preview/music_bar.png'

  import $ from 'jquery'

  // 引入头部公共组件
  import Header from '../subComponents/header.vue'

  import {formatTime} from '../../common'

  export default {
    data () {
      return {
        song: '',
        audioDom: {}, // 存储音频节点对象
        isplay: false, // 存储音乐播放器的状态，暂停或者播放
        playUrl: 'url(' + playUrl + ')',
        pauseUrl: 'url(' + pauseUrl + ')',
        loadingUrl: 'url(' + musicLoadingUrl + ')',
        playingUrl: 'url(' + musicplayingUrl + ')',
        currentTime: '00:00', // 存储当前播放的时间
        totalTime: '00:00', // 存储播放时间总长
        isLoading: false,
        isJump: false // 记录是否允许用户通过点击进度条来改变进度（只有在播放时候才允许）
      }
    },
    components: {
      'common-header': Header
    },
    mounted () {
      this.ProgressTouchFollow()
      this.song = this.$route.query.title
    },
    watch: {
      isLoading (val, oldval) {
        $('.toolbar').css({
          backgroundImage: val ? this.loadingUrl : this.playingUrl
        })
      }
    },
    methods: {
      // init音乐播放器
      Init () {
        var per = this.$refs.audio.currentTime / this.$refs.audio.duration

        this.isLoading = false

        // 设置进度条的宽度
        $('.current_bar').width($('.total_bar').width() * per)

        // 对时间进行格式上的处理
        this.currentTime = formatTime(this.$refs.audio.currentTime)
        this.totalTime = formatTime(this.$refs.audio.duration)
      },

      loading () {
        this.isLoading = true
      },

      // 控制音乐开关
      Switch () {
        this.isplay = !this.isplay

        if (this.isplay) {
          $('.music_switch').css({
            backgroundImage: this.pauseUrl
          })

          // 音乐播放
          this.$refs.audio.play()
        } else {
          $('.music_switch').css({
            backgroundImage: this.playUrl
          })

          // 音乐暂停
          this.$refs.audio.pause()
        }
      },

      // 播放结束
      PlayEnd () {
        $('.music_switch').css({
          backgroundImage: this.playUrl
        })

        this.isplay = false

        this.currentTime = formatTime(0)

        $('.current_bar').width(0)
      },

      // 进度点击跳跃以及滑动改变
      ProgressTouchFollow () {
        var _this = this
        var e
        var touch
        var startX
        var startY
        var moveX
        var moveY
        var distanceX
        var distanceY
        var totalWidth = $('.total_bar').width()
        var _width
        var currentWidth
        var _left = parseInt($(_this.$refs.musicController).css('marginLeft')) + parseInt($(_this.$refs.switch).css('marginLeft')) + _this.$refs.switch.offsetWidth + _this.$refs.currentTime.offsetWidth + parseInt($(_this.$refs.currentTime).css('marginLeft')) + parseInt($(_this.$refs.currentTime).css('marginRight'))

        this.$refs.jumpBar.addEventListener('touchstart', function (event) {
          e = event || window.event
          if (e.targetTouches.length !== 1) { return false } // 如果触摸对象超过一个不符合滑动要求
          touch = e.targetTouches[0]
          startX = touch.pageX
          startY = touch.pageY
          $('.current_bar').width(startX - _left)
          currentWidth = startX - _left
          _this.$refs.audio.currentTime = _this.$refs.audio.duration * currentWidth / totalWidth
        })

        this.$refs.jumpBar.addEventListener('touchmove', function (event) {
          e = event || window.event
          if (e.targetTouches.length !== 1) { return false } // 如果触摸对象超过一个不符合滑动要求
          touch = e.targetTouches[0]
          moveX = touch.pageX
          moveY = touch.pageY
          distanceX = moveX - startX
          distanceY = moveY - startY
          if (Math.abs(distanceY) > Math.abs(distanceX)) { return false } // 在Y轴滑动 不做操作
          e.preventDefault() // 阻止浏览器默认的滑动翻页
          _width = currentWidth + distanceX
          if (_width > totalWidth) {
            _width = totalWidth
          }
          if (_width < 0) {
            _width = 0
          }
          _this.$refs.audio.currentTime = _this.$refs.audio.duration * _width / totalWidth
        })
      }
    }
  }
</script>
<style scoped>
  .container {
    background-color: #f7f7f7;
    width: 100%;
    height: 100%;
  }

  /* content部分*/
  .content .logo {
    width: 2.2rem;
    height: 2.2rem;
    margin: 1.22rem auto 0.28rem;
    background: url('../../assets/images/preview/music_logo.png') no-repeat;
    background-size: 100% 100%;
  }

  .content .music_title {
    font-size: 0.3rem;
    color: #333;
    text-align: center;
  }

  .content .music_controller {
    width: 6.7rem;
    height: 1.4rem;
    background-color: #fff;
    margin: 0.82rem auto 0;
    overflow: hidden;
  }

  .content .music_controller .music_switch {
    width: 0.7rem;
    height: 0.7rem;
    background: url('../../assets/images/preview/music_play.png') no-repeat;
    background-size: 100% 100%;
    margin: 0.35rem 0 0 0.35rem;
    cursor: pointer;
  }

  .content .music_controller .current_time {
    font-size: 0.22rem;
    color: #666;
    margin: 0.53rem 0.14rem 0 0.15rem;
  }

  .content .music_controller .total_time {
    font-size: 0.22rem;
    color: #666;
    margin: 0.53rem 0.15rem 0 0;
  }

  .content .music_controller .progress_bar {
    margin: 0.68rem 0 0 0;
    position: relative;
  }

  .content .music_controller .progress_bar .total_bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 3.97rem;
    height: 0.04rem;
    background-color: #e5e5e5;
    border-radius: 0.04rem;
  }

  .content .music_controller .progress_bar .current_bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 0rem;
    height: 0.04rem;
    background-color: #6699ff;
    border-radius: 0.04rem;
  }

  .content .music_controller .progress_bar .current_bar .toolbar {
    position: absolute;
    top: -0.06rem;
    right: -0.08rem;
    width: 0.16rem;
    height: 0.16rem;
    background: url('../../assets/images/preview/music_bar.png') no-repeat;
    background-size: 100% 100%;
  }

  .content .music_controller .progress_bar .jump_bar {
    position: absolute;
    top: -0.17rem;
    left: 0;
    width: 3.97rem;
    height: 0.34rem;
    background-color: transparent;
    border-radius: 0.04rem;
    cursor: pointer;
    z-index: 999;
  }
</style>
